<template>
	<view class="xb-page">
		<page-head :title="title"></page-head>
		<view class="page-grid-view">
			<view class="uni-grid-9 cust-grid-9">
				<view class="uni-grid-9-item cust_grid_item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in date" :key="index"
				 :class="(index+1) % 4 === 0 ? 'no-border-right' : ''">
					<view class="uni-flex uni-column" style="width: 100%; align-items: center;" v-on:click="quickto(item.tab,item.tourl)">
						<image class="uni-grid-9-image" style="align-items: center; " :src="item.url"></image>
						<text class="uni-grid-6-text">{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view>
			<text class="xb-page-section-title" style="margin-left: 20px;margin-top: 10px;">本月财务</text>
		</view>
		<view class="xb-list-cell-noline list-cell-cls" hover-class="uni-list-cell-hover">
			<view class="uni-list-cell-navigate mainpage-color-gray" @click="totalquery(1)">
				<view class="list-cell-text">
					<image class="uni-list-cell-navigate-image" src="../../../static/qianbao.png"></image>
					应收金额
				</view>
				<text class="uni-badge-range uni-badge-comments">¥{{feeTotal.needcharge}}</text>
			</view>
		</view>
		<view class="xb-list-cell-noline list-cell-cls" hover-class="uni-list-cell-hover">
			<view class="uni-list-cell-navigate mainpage-color-gray " @click="totalquery(1)">
				<view class="list-cell-text">
					<image class="uni-list-cell-navigate-image" src="../../../static/qianbao.png"></image>
					新签总额
				</view>
				<text class="uni-badge-range uni-badge-comments">¥{{feeTotal.signcharge}}</text>
			</view>
		</view>
		<view class="xb-list-cell-noline list-cell-cls" hover-class="uni-list-cell-hover">
			<view class="uni-list-cell-navigate mainpage-color-gray" @click="totalquery(1)">
				<view class="list-cell-text">
					<image class="uni-list-cell-navigate-image" src="../../../static/qianbao.png"></image>
					续费总额
				</view>
				<text class="uni-badge-range uni-badge-comments">¥{{feeTotal.realcharge}}</text>
			</view>
		</view>
		<view class="xb-list-cell-noline list-cell-cls" hover-class="uni-list-cell-hover">
			<view class="uni-list-cell-navigate mainpage-color-gray" @click="totalquery(1)">
				<view class="list-cell-text">
					<image class="uni-list-cell-navigate-image" src="../../../static/qianbao.png"></image>
					退费总额
				</view>
				<text class="uni-badge-range uni-badge-comments">¥{{feeTotal.backcharge}}</text>
			</view>
		</view>
		<view>
			<view class="xb-page-section-title">本月消课</view>
		</view>
		<view class="xb-list-cell-noline  list-cell-cls" hover-class="uni-list-cell-hover">
			<view class="uni-list-cell-navigate mainpage-color-gray" @click="totalquery(1)">
				<view class="list-cell-text">
					<image class="uni-list-cell-navigate-image" src="../../../static/qianbao.png"></image>
					应消课时
				</view>
				<text class="uni-badge-range uni-badge-comments">{{feeTotal.needcheck}}次</text>
			</view>
		</view>
		<view class="xb-list-cell-noline uni-list-cell-last list-cell-cls" hover-class="uni-list-cell-hover">
			<view class="uni-list-cell-navigate mainpage-color-gray" @click="totalquery(1)">
				<view class="list-cell-text">
					<image class="uni-list-cell-navigate-image" src="../../../static/qianbao.png"></image>
					实消课时
				</view>
				<text class="uni-badge-range uni-badge-comments">{{feeTotal.realcheck}}次</text>
			</view>
		</view>

	</view>
</template>

<script>
	import pageHead from '../../../components/page-head.vue';
	import {
		contracetotal
	} from '../../../api/getData.js'
	export default {
		data() {
			return {
				title: 'grid',
				formdata: {

				},
				feeTotal: {
					needcharge: 0,
					realcharge: 0,
					signcharge: 0,
					recharge: 0,
					backcharge: 0,
					needcheck:0,
					realcheck:0,
				},


				date: [{
						title: '导入学员',
						url: '../../../static/main_export_stu.png',
						tab: true,
						tourl: '/pages/template/xb/studentlist'
					},
					{
						title: '机构课表',
						url: '../../../static/main_class_msg.png',
						tourl: 'no'
					},
					{
						title: '考勤管理',
						url: '../../../static/main_check_cls.png',
						tourl: 'no'
					},
					{
						title: '课节管理',
						url: '../../../static/main_les_msg.png',
						tourl: 'no'
					},
					{
						title: '合约缴费',
						url: '../../../static/main_charge_msg.png',
						tourl: '/pages/template/xb/chargetotallist'
					},
					{
						title: '课评记录',
						url: '../../../static/main_cls_red.png',
						tourl: 'no'
					},
					{
						title: '群发通知',
						url: '../../../static/main_to_msg.png',
						tourl: '/pages/templat/xb/addSendMsg'
					},
					{
						title: '机构招生',
						url: '../../../static/main_org_msg.png',
						tourl: 'no'
					},

				]

			}
		},
		onLoad: function(e) {



		},
		methods: {
			loadtotal: async function(e) {
				const res = await contracetotal(formdata);
				if (res.success == true) {

				} else {

				}
			},

			headforward: function() {

			},
			/**
			 * 跳转统计详情
			 */
			totalquery: function(index) {
// 				console.info('totalquery:' + index);
// 				var tourl = '';
// 				uni.navigateTo({
// 					url: tourl
// 				})
			},
			//跳转到对应页面
			quickto: function(tab, tourl) {

				console.info('tourl:' + tourl);
				if (tourl == 'no') {
					uni.showToast({
						icon: "none",
						title: '暂不支持该功能!'
					});
					return;
				}
				if (tab == true) {
					uni.switchTab({
						url: tourl
					})

				} else {
					uni.navigateTo({
						url: tourl
					})
				}
			},
		},

		onShareAppMessage() {
			return {
				title: '学宝',
				path: '/pages/template/xb/mainpage'
			}
		}
	}
</script>

<style scoped>
	@import "../../../common/uni.css";
	@import "../../../common/xb.css";

	.page-grid-view {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;

	}

	.uni-list-cell-navigate-image {
		width: 30px;
		height: 30px;
	}

	.btn-ng-btn {
		width: 100px;
		height: 100px;
	}

	.uni-grid-6-text {
		margin-top: 10px;

		line-height: 50px;
		height: 50px;
		color: #929292;
		text-align: center;
		font-size: 30px;
	}

	.cust_grid_item {
		background-color: #FFFFFF;
		justify-content: center;
	}


	.flex-item {
		width: 200px;
		height: 300px;
		text-align: center;
		line-height: 300px;
		font-size: 26px;
	}

	.flex-item-V {
		margin: 0 auto;
		width: 300px;
		height: 200px;
		text-align: center;
		line-height: 200px;
	}

	.cust-grid-9 {
		background-color: #FFFFFF;
	}

	.text {
		margin: 10px;
		padding: 0 20px;
		background-color: #ebebeb;
		height: 70px;
		line-height: 70px;
		text-align: center;
		color: #cfcfcf;
		font-size: 26px;
	}

	.list-cell-text {
		color: #BBBBBB;
	}

	.list-cell-cls {
		background-color: #FFFFFF;
	}
</style>
